<template>
<div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">编辑学员绑定</div>
                <div class="widget-function am-fr">
                    <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
                </div>
            </div>
            <div class="widget-body  am-fr">
                <div class="bing-student am-u-sm-12" v-for="(item,index) in tableData" :key="index" >
                    <div class="am-u-sm-5 am-fl">
                        <label class="am-u-sm-3 am-form-label">
                            <span class="am-text-danger am-margin-right-xs am-text-xs"></span>学员{{index+1}}:
                        </label>
                        <div class="am-u-sm-9 am-fl form-last-left form-last-input">
                            <el-input v-model="item.studentName" size="small"  placeholder="请输入学员" :disabled="true"></el-input>
                        </div>
                    </div>
                    <div class="am-u-sm-5 am-fl form-last-left">
                        <label class="am-u-sm-3 am-form-label">
                            <span class="am-text-danger am-margin-right-xs am-text-xs"></span>电话:
                        </label>
                        <div class="am-u-sm-9 am-fl form-last-left form-last-input">
                            <el-input v-model="item.phoneNo" size="small"  placeholder="请输入电话" :disabled="true"></el-input>
                        </div>
                    </div>
                    <button type="button" size="small" class="am-btn am-btn-primary" @click="unbindStudent(item)">解绑</button>
                    <!-- <button type="button" size="big" class="am-btn am-btn-primary" @click="editStudentBing(item)">编辑</button> -->
                </div>
                <div class="am-form-group save-btn" style="text-align: center">
                    <button type="button" size="small" class="am-btn am-btn-primary" @click="addStudentBing">新增学员</button>
                </div>
            </div>
            <add-bing-student ref = "addBingStudent"></add-bing-student>
        </div>
    </div>

</div>
</template>

<script>

import io from '../../lib/io/index'
import AddBingStudent from "./AddBingStudent"
  export default{
    data: function () {
        return {
            userId:'',
            tableData:[],
        }
    },
    components: {
        AddBingStudent
    },
    created: function () {
        this.userId = this.$route.query.userId
        
    },
    mounted: function () {
        this.customerBindStudentList()
        $(window).smoothScroll()

    },
    computed:{
        
    },
    methods: {
        customerBindStudentList(){
            let param = {
              userId:this.userId
            }
            io.post(io.customerBindStudentList,param,(ret)=>{
                if(ret.success){
                    this.tableData = ret.data
                }else{
                    this.$alert(ret.desc)
                }
          })
        },
        addStudentBing(){
            this.$refs.addBingStudent.userInfo.studentName = ""
            this.$refs.addBingStudent.userInfo.phoneNo = ""
            this.$refs.addBingStudent.userId = this.userId
            this.$refs.addBingStudent.show()
        },
        unbindStudent(row){
            let _this = this
            let param = {
                userId:row.userId,
                studentId:row.studentId
            }
            this.$confirm('你确定要解绑？',
                function () {
                    io.post(io.unbindStudent,param, (ret)=>{
                        if (ret.success) {
                            _this.$toast('解绑成功！')
                            _this.customerBindStudentList()
                        } else {
                            _this.$alert(ret.desc)
                        }
                    })
                }
            );
            
        },
        // editStudentBing(row){
        //     this.$refs.addBingStudent.userId = row.userId
        //     this.$refs.addBingStudent.userInfo.studentName = row.studentName
        //     this.$refs.addBingStudent.userInfo.phoneNo = row.phoneNo
        //     this.$refs.addBingStudent.show()
        // }

    }
  }
</script>
<style scoped lang="less">

  .widget-body{
        .form-last-left{
            float:left;
            &.form-last-input{
                padding-left:20px;
            }
        }
        .am-form-label{
          text-align:right;
        }
        .bing-student{
            margin-bottom:20px;
        }
        .save-btn{
            margin-top:20px;
        }
  }

</style>
<style lang="less">
    .widget-body{
        .bing-student{
            label{
                margin-top:5px;
            }
        }
    }
</style>

